<template>
    <!--  轮播图  -->
    <el-carousel height="450px">
        <el-carousel-item v-for="(banner, index) in banners" :key="index">
            <el-image :src="banner" />
        </el-carousel-item>
    </el-carousel>

    <!--  广告位  -->
    <div class="ad">
        <ul>
            <li><el-image src="/src/assets/ad.png" /></li>
            <li><el-image src="/src/assets/ad.png" /></li>
            <li><el-image src="/src/assets/ad.png" /></li>
            <li><el-image src="/src/assets/ad.png" /></li>
        </ul>
    </div>

    <!-- 推荐的商品 -->
    <div class="recom" v-for="(topCategory, index) in topCategoryList" :key="index">
        <div class="categoryName">{{ topCategory.name }}</div>
        <div class="goodsList">
            <ul>
                <li v-for="(product, index) in topCategory.productList.slice(0, 10)" :key="index" @click="toProductView(product.id)">
                    <div class="pic"><el-image :src="product.mainImage"/></div>
                    <div class="name">{{product.name}}</div>
                    <div class="dscp">{{product.subtitle}}</div>
                    <div class="price">￥ {{product.price}}</div>
                </li>
            </ul>
        </div>
    </div>

</template>

<script setup>
    import {ref} from "vue";
    import categoryApi from "@/api/categoryApi.js";
    import {useRouter} from "vue-router";

    const router = useRouter();

    const banners = ref([
        "/src/assets/banner/banner1.png",
        "/src/assets/banner/banner2.png",
        "/src/assets/banner/banner3.png"
    ])

    //已上架的父分类
    const topCategoryList = ref([]);
    //1. 获取父分类 2. 上架
    categoryApi.selectTopCategoryList().then(result => {
        topCategoryList.value = result.data;
    })

    //跳转到商品详情页面
    function toProductView(id) {
        router.push({
            path: '/product', //跳转到的位置，值和页面路由中配置的路径相同
            query: {
                //id: id
                id
            }
        });
    }

</script>

<style scoped>
    .ad {
        margin: 20px 0;
    }

    .ad ul li {
        float: left;
        width: 285px;
        margin-right: 20px;
    }

    .ad ul li:nth-child(4n) {
        margin-right: 0px;
    }

    .recom {
        margin-bottom: 20px;
    }

    .recom .goodsList ul li {
        width: 224px;
        float: left;
        margin-right: 20px;
        margin-bottom: 20px;
        text-align: center;
        background-color: #EEE;
        cursor: pointer;
    }

    .recom .goodsList ul li:hover {
        box-shadow: 0px 0px 20px #000;
    }

    .recom .goodsList ul li:nth-child(5n) {
        margin-right: 0px;
    }

    .recom .categoryName {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .name, .dscp, .price {
        line-height: 25px;
    }

    .recom .name {
        font-size: 16px;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .recom .dscp {
        color: #AAA;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .recom .price {
        font-size: 12px;
        color: var(--theme-color);
    }
    .recom .pic {
        width: 200px;
        height: 200px;
    }
</style>